<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Cabinet CW01 demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="format-detection" content="telephone=no">
    <!--<script type="text/javascript" src="js/adaptive.js"></script>-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../element-ui/index.ml.css">
    <script type="text/javascript" src="../js_code/jquery-3.6.1.min.js?v=2"></script>
    <script type="text/javascript" src="../element-ui/vue.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="../element-ui/index.en.js"></script>

    <script src="../js_code/underscore-min.js"></script>
    <script src="../js_code/jquery-3.6.1.min.js"></script>
    <script src="../js_code/iotauth.js"></script>
    <script src="../js_code/v5_cw01_demo.js"></script>
    <script>
        function refresh2() {
            window.location.reload();
        }
    </script>
    <style>
        .box-card {

            display: inline-block;
        }
    </style>
</head>
<body class="big_show">

<div style="display: block">
    <input id="base_url" value="https://dgndev.bestwond.com" style="width: 200px;border-radius: 5px;">
    <input id="app_id" value="bw_de2767d821f911e" style="width: 200px;border-radius: 5px;">
    <input id="device_number" value="2100013075" style="width: 200px;border-radius: 5px;">
    <input id="app_secret" value="de27690e21f911eda66200163e198b20" style="width: 200px;border-radius: 5px;">

    <button onclick="kd.get_device_list()">Get Device List</button>
</div>
<div id="app"
     class="screen_app">
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step1_set_save_order()" type="success" style="font-weight: bolder">
                        Step 1 Set save order
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="User Id:">
                    <el-input v-model="user_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Code:">
                    <el-input v-model="code" style="width:120px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Set date:">
                    <el-date-picker
                            v-model="start_end_time"
                            type="datetimerange"
                            range-separator="To"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="Start date"
                            end-placeholder="End date" :default-time="['8:00:00', '22:00:00']"
                            :picker-options="pickerOptions">
                    </el-date-picker>

                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step1 API Result</span>
            </div>
            {{step1_data}}
        </el-card>
    </el-row>

    <!-- todo Step2 update order -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="100px">
                <el-form-item>
                    <el-button @click="step2_update_order()" type="success" style="font-weight: bolder">
                        Step 2 update order
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="Order Id:">
                    <el-input v-model="order_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Code:">
                    <el-input v-model="code" style="width:120px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Status:">
                    <el-select v-model="status" placeholder="Please select status">
                        <el-option
                                v-for="item in order_status"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="Set date:">
                    <el-date-picker
                            v-model="start_end_time"
                            type="datetimerange"
                            range-separator="To"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="Start date"
                            end-placeholder="End date" :default-time="['8:00:00', '22:00:00']"
                            :picker-options="pickerOptions">
                    </el-date-picker>

                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step2 API Result</span>
            </div>
            {{step1_data}}
        </el-card>
    </el-row>

    <!-- todo Step3 get order -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step3_get_order()" type="success" style="font-weight: bolder">
                        Step 3 get order
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="User Id:">
                    <el-input v-model="user_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Code:">
                    <el-input v-model="code" style="width:120px;">
                    </el-input>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step3 API Result</span>
            </div>
            {{step3_data}}
        </el-card>
    </el-row>

    <!-- todo Step4 get can save boxes -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 280px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step4_get_can_save_boxes()" type="success" style="font-weight: bolder">
                        Step 4 get can save boxes
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="Box Size:">
                    <el-select v-model="box_size" placeholder="Select" style="width:120px;">
                        <el-option label="Small" value="S"></el-option>
                        <el-option label="Middle" value="M"></el-option>
                        <el-option label="Larger" value="L"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-row>
                        <el-button v-for="box in can_save_box_list" @click="set_box_id(box)"
                                style="width:80px;height:90px;border:1px solid silver;">

                            {{box.box_name}}
                            <el-row>
                                {{box.box_id}}
                            </el-row>
                        </el-button>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step4 API Result</span>
            </div>
            {{step4_data}}
        </el-card>
    </el-row>

    <!-- todo Step5 order check in -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step5_order_check_in()" type="success" style="font-weight: bolder">
                        Step 5 order check in
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="Order Id:">
                    <el-input v-model="order_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Box Id:">
                    <el-input v-model="box_id" style="width:120px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Action date:">
                     <el-date-picker
                      v-model="action_date"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                      placeholder="Select date">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step5 API Result</span>
            </div>
            {{step5_data}}
        </el-card>
    </el-row>

    <!-- todo Step6 order in progress -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step6_order_in_progress()" type="success" style="font-weight: bolder">
                        Step 6 order in progress
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="Order Id:">
                    <el-input v-model="order_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Action date:">
                     <el-date-picker
                      v-model="action_date"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                      placeholder="Select date">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step6 API Result</span>
            </div>
            {{step6_data}}
        </el-card>
    </el-row>

    <!-- todo Step7 order check out -->
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 100px;margin-top: 30px;">

            <el-form ref="form" :inline="true" :model="form" label-width="120px">
                <el-form-item>
                    <el-button @click="step7_order_check_out()" type="success" style="font-weight: bolder">
                        Step 7 order check out
                    </el-button>
                </el-form-item>
                <el-form-item label="Device Id:">
                    <el-input v-model="device_number" style="width:120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="Order Id:">
                    <el-input v-model="order_id" type='text' style="width:220px;">
                    </el-input>
                </el-form-item>

                <el-form-item label="Action date:">
                     <el-date-picker
                      v-model="action_date"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      default-time="12:00:00"
                      placeholder="Select date">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </el-card>
    </el-row>
    <el-row>
        <el-card class="box-card" style="width: 100%;height: 160px;background-color: black;color:white;">
            <div slot="header" class="clearfix">
                <span>{{device_number}} Step7 API Result</span>
            </div>
            {{step7_data}}
        </el-card>
    </el-row>
</div>
</div>
</body>

<script>

    bw = new Vue({
        el: '#app',
        data: {
            form: {},
            device_number: "2100013075",
            user_id: "user10001",
            start_end_time: "",
            loading: false,
            order_id: "",
            code: "1001",
            status: "",
            box_id: "",
            start_date: "",
            order_status: [
                {value: 'CONFIRMED', label: 'CONFIRMED'},
                {value: 'ONGOING', label: 'ONGOING'},
                {value: 'CHECK_IN', label: 'CHECK_IN'},
                {value: 'IN_PROGRESS', label: 'IN_PROGRESS'},
                {value: 'CHECK_OUT', label: 'CHECK_OUT'},
            ],
            end_date: "",
            select_num: "number",
            api_data: "",
            action_date: "",
            can_save_box_list: [],
            step1_data: "",
            step2_data: "",
            step3_data: "",
            step4_data: "",
            step5_data: "",
            step6_data: "",
            step7_data: "",
            step8_data: "",
            step9_data: "",
            step10_data: "",
            box_size: "S",
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        },
        created: function () {

        },
        methods: {
            step1_set_save_order: function () {
                this.step1_data = kd.step1_set_save_order(this.device_number, this.user_id, this.code, this.start_end_time[0], this.start_end_time[1]);
            },
            step2_update_order: function () {
                this.step2_data = kd.step2_update_order(this.device_number, this.order_id, this.code, this.status, this.start_end_time[0], this.start_end_time[1]);
                this.step3_get_order();
            },
            step3_get_order: function () {
                this.step3_data = kd.step3_get_order(this.device_number, this.user_id, this.code);
                var order_info = this.step3_data.data;
                this.order_id = order_info.order_id;
                this.status = order_info.status;
                this.start_date = order_info.start_date;
                this.end_date = order_info.end_date;
                this.start_end_time = [this.start_date, this.end_date];
                console.log("order_id ====", this.order_id)
            },

            step4_get_can_save_boxes: function () {
                this.step4_data = kd.step4_get_can_save_boxes(this.device_number, this.box_size);
                this.can_save_box_list = this.step4_data.data;
            },
            set_box_id: function (box) {
                this.box_id = box.box_id;
            },
            step5_order_check_in: function () {
                this.step5_data = kd.step5_order_check_in(this.device_number, this.order_id,  this.box_id, this.action_date);
                this.step3_get_order();
            },
            step6_order_in_progress: function () {
                this.step6_data = kd.step6_order_in_progress(this.device_number, this.order_id,   this.action_date);
                this.step3_get_order();
            },
            step7_order_check_out: function () {
                this.step7_data = kd.step7_order_check_out(this.device_number, this.order_id,  this.action_date);
                this.step3_get_order();
            },
        }
    });
</script>
</html>
